<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar @onSearch="onSearch"/>
    <!-- 新增商品的按钮 -->
    <el-button @click="showAddModal" type="primary" class="but1">新增商品分类</el-button>
    <el-table row-key="id" :data="cates" style="width: 100">
      <el-table-column prop="cateName" label="分类名" width="300" />
      <!-- <el-table-column prop="success" label="类型" /> -->
      <el-table-column prop="enable" label="是否启用">
        <template #default="{ row }">
          <div>
            <el-switch
              v-model="row.enable"
              class="ml-2"
              inline-prompt
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              active-text="是"
              inactive-text="否"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="图标">
        <template #default="{ row }">
          <div>
            <el-image
              :src="row.icon"
              alt=""
              style="width: 50px; height: 50px"
              :zoom-rate="1.2"
              :preview-src-list="[row.icon]"
              :initial-index="4"
              fit="cover"
              preview-teleported
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="showUpdate(row.id)">编辑</el-button>
          <el-button type="danger" @click="deleCate(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class="page"
    layout="prev, pager, next, jumper, sizes"
    v-model:page-size="pageSize"
    v-model:current-page="page"
    :total="total" />
  </div>
  <!-- 弹出窗 -->
    <el-dialog v-model="addModalShow" title="创建产品分类">
      <cate-add/>
    </el-dialog>
    <!-- 修改商品分类 -->
    <el-dialog v-model="addModalupdate" title="修改商品分类">
      <cate-update :id="cateId"/>
    </el-dialog>
</template>

<script>
import { fetchCates, delCates } from '@a/cateLists'
import SearchBar from '@c/SearchBar.vue'
import CateAdd from './components/CateAdd.vue'
import CateUpdate from './components/CateUpdate.vue'
export default {
  name: 'CateLists',
  data () {
    return {
      cates: [],
      page: 1,
      total: 0,
      pageSize: 10,
      addModalShow: false,
      addModalupdate: false,
      cateId: -1,
      dateRange: [],
      searchParams: {
        key: '', // 搜索关键字
        state: '', // 开始日期
        end: '' // 结束日期
      }
    }
  },
  methods: {
    // 删除商品分类
    deleCate (id) {
      this.$confirm('你确定要删除我嘛？', '删除').then(() => {
        delCates({ id }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              duration: 1500,
              onClose: () => {
                this.$router.go(0)
              }
            })
          }
        })
      })
    },
    // 点击触发修改编辑商品弹窗
    showUpdate (id) {
      this.addModalupdate = true
      this.cateId = id
    },
    // 点击触发弹窗
    showAddModal () {
      this.addModalShow = true
    },
    // 点击搜索
    onSearch (searchParams) {
      this.searchParams = searchParams
      this.fetchCates()
    },
    switchEnable (id, enable) {
      console.log(id, enable)
    },
    fetchCates () {
      fetchCates({
        ...this.searchParams,
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        if (res.data.code === 200) {
          this.cates = res.data.data.lists
          this.total = res.data.data.total
        }
      })
    }
  },
  watch: {
    page () {
      this.fetchCates()
    },
    pageSize () {
      this.fetchCates()
    }
  },
  created () {
    this.fetchCates()
  },
  components: {
    SearchBar,
    CateAdd,
    CateUpdate
  }
}
</script>

<style lang="scss" scoped>
  .page{
    margin: 10px 25%;
  }
  .but1{
    margin-bottom: 10px;
  }
</style>
